<ui-bind path="common.plugins" config="template" class="block">
	<script type="text/html">
		{{ foreach m in value }}
			{{ if !m.hidden }}
			<ui-component name="page" path="common.page" config="if:plugin{{ m.id }};url:/_{{ m.id }}/index.html;reload:?/reload;hidden:?/hide;id:_{{ m.id }}" class="hidden invisible"></ui-component>
			{{ if m.routes }}
				{{ foreach route in m.routes }}
				<ui-component name="page" path="common.page" config="if:plugin{{ m.id }}{{ route.html }};url:/_{{ m.id }}/{{ route.html }}.html;reload:?/reload;hidden:?/hide;id:_{{ m.id }}" class="hidden invisible"></ui-component>
				{{ end }}
			{{ fi }}
			{{ fi }}
		{{ end }}
	</script>
</ui-bind>

<ui-bind path="common.page" config="show:value === 'flows'" class="block">
	<ui-plugin path="common">
		<ui-component name="viewbox" config="parent:window;scrollbar:1;scrollbarshadow:1;margin:90" class="invisible" style="margin-right:64px">

			<ui-component name="empty" path="common.groups" config="parent:auto" class="invisible">

				<script type="text/html">
					<div>@(This Total.js Flow application doesn't contain any FlowStream)</div>
					<div class="m b">@(Create something awesome)</div>
					<div style="max-width:220px;margin:0 auto;width:100%;padding:5px">
						<button class="exec button b" data-exec="common/create"><i class="ti ti-plus-circle mr5"></i>@(Create FlowStream)</button>
					</div>
				</script>

				<div>

					<div class="padding npb help nmt">
						<span class="exec" data-exec="?/search" style="font-size:12px"><i class="ti ti-search"></i></span><ui-bind path="common.items" config="text b:value ? value.length : 0">@(Total running FlowStreams): <b></b></ui-bind>
					</div>

					<ui-bind path="common.groups" config="template" class="flowstreams">
						<script type="text/html">
							{{ foreach g in value }}
								<div class="flows">
									{{ if g.name }}<h2>{{ g.name }}</h2>{{ fi }}
									{{ foreach m in g.items }}
									<figure class="exec exec3{{ if m.stats && m.stats.paused }} paused{{ fi }}" data-exec="common/open" data-id="{{ m.id }}" data-exec3="common/contextmenu">
										<section{{ if m.color }} style="border-color:{{ m.color }}"{{ fi }}>
											<div class="ispaused"><i class="ti ti-pause"></i></div>
											{{ if m.reference }}<div class="reference">{{ m.reference }}</div>{{ fi }}
											<div class="options exec" data-exec="common/contextmenu" data-prevent="true"><i class="ti ti-ellipsis-v"></i></div>
											<div class="icon"{{ if m.color }} style="color:{{ m.color }}"{{ fi }}><i class="{{ m.icon }}"></i></div>
											<div class="meta">
												<div class="name">{{ if m.version }}<span style="background-color:{{ m.version | color }}" title="@(Version)">{{ m.version }}</span>{{ fi }}{{ m.name }}</div>
												<div class="author">@(Author): {{ m.author | empty }}</div>
												<div class="size">@(Size): {{ m.size | filesize }}</div>
												<div class="proxy"><i class="ti ti-server mr5"></i>@(Proxy): {{ if m.proxypath }}<span>{{ m.proxypath }}</span>{{ else }}---{{ fi }}</div>
											</div>
											<div class="stats">
												<div><span>{{ m.stats.pid }}</span><label>@(PID)</label></div>
												<div><span>{{ m.stats.memory | filesize }}</span><label>@(Memory)</label></div>
												<div><span>{{ m.stats.messages | format(0) }}</span><label>@(Messages)</label></div>
												<div><span>{{ m.stats.pending | format(0) }}</span><label>@(Pending)</label></div>
												<div><span>{{ m.stats.mm | format(0) }}</span><label>@(Per minute)</label></div>
												<div><span>{{ m.stats.errors | format(0) }}</span><label>@(Errors)</label></div>
											</div>
										</section>
									</figure>
									{{ end }}
								</div>
							{{ end }}
						</script>
					</ui-bind>
				</div>
			</ui-component>
		</ui-component>
		<footer>
			<ui-bind path="common.stats" config="template;show" class="hidden">
				<script type="text/html">
					<span><b>{{ value.memory | filesize }}</b>@(Memory)</span>
					<span><b>{{ value.messages | format(0) }}</b>@(Messages)</span>
					<span><b>{{ value.pending | format(0) }}</b>@(Pending)</span>
					<span><b>{{ value.mm | format(0) }}</b>@(Per minute)</span>
					<span><i class="ti ti-user green mr5"></i><b>{{ value.online | format(0) }}</b>@(Online clients)</span>
					<span class="center" title="FlowStream: {{ value.version }}, Total.js: {{ value.total }}, Node.js: {{ value.node }}">FlowStream v{{ value.version }} | Total.js: v{{ value.total }}</span>
				</script>
			</ui-bind>
		</footer>
	</ui-plugin>
</ui-bind>

<script>
	EXTENSION('@common', function(exports) {

		var model = exports.model;

		exports.search = function(el) {
			var opt = {};
			opt.cache = false;
			opt.recent = false;
			opt.init = true;
			opt.clear = true;
			opt.search = function(value, next) {

				var output = [];

				value = value.toSearch();

				for (let item of model.items) {
					if (item.name.toSearch().indexOf(value) !== -1) {
						if (output.push({ id: item.id, name: item.name + '<span class="badge badge-color badge-medium ml5">@(FlowStream)</span>', icon: item.icon, color: item.color }) > 10)
							break;
					}
				}

				for (let item of model.plugins) {
					if (item.name.toSearch().indexOf(value) !== -1) {
						if (output.push({ id: 'plugin' + item.id, name: item.name, icon: item.icon }) > 10)
							break;
					}
				}

				output.quicksort('name');
				next(output);
			};
			opt.callback = function(selected) {
				if (selected.id.substring(0, 6) === 'plugin')
					exports.menu(selected);
				else
					exports.open(selected);
			};
			SETTER('spotlight/show', opt);
		};

	});
</script>